<template>
<div class="swiper">
<swiper :options="swiperOption" v-if="showSwiper">
    <!-- slides-->
    <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.urlImg" />
    </swiper-slide>
    <!-- <swiper-slide>
      <img class="swiper-img" src="@/assets/styles/images/3.jpg" />
    </swiper-slide>
    <swiper-slide>
        <img class="swiper-img" src="@/assets/styles/images/2.jpg" />
    </swiper-slide>
    <swiper-slide>
        <img class="swiper-img" src="@/assets/styles/images/3.jpg" />
    </swiper-slide> -->
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <!-- 左右箭头 -->
    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
    <!-- 去掉底下黑框 -->
    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>
</div>
</template>

<script>
// import imurl from '@/assets/styles/images/week1.jpg'
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        paginationClickable: true, // 那三个小点点
        speed: 500, // slides滑块动画之间的持续时间（单位ms）
        observer: true, // 这个我不知道 使用非Swiper内置函数而是js删除第一个slide时分页器实时更新了
        observeParents: true, // 这个我也不知道 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
        autoplayDisableOnInteraction: false, // 当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay
        autoplay: 1500 // 过渡延迟时间（单位ms）
      }
    }
  },
  // 解决一开始轮播定义为空数组，轮播图默认显示最后一张的问题
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style scoped>
.swiper{
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 42%;
}
.swiper-img{
    width: 100%;
    height: 100%;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 14px;
}
.swiper >>> .swiper-pagination-bullet-active {
    background: #ffffff;
}
</style>
